<template>
  <div id="regardsapp">
    <div class="nav_reg">
      <el-tabs v-model="activeName">
        <el-tab-pane label="资质" name="first">
          <div class="regzhiz">
            <div class="wx_tp">
              <img src="../image/微信图片_20211025152713.png" alt="" />
            </div>
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
          
            
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog >
              <img width="100%"  alt="" />
            </el-dialog>
          </div>
        </el-tab-pane>
        <el-tab-pane label="平台信息" name="second">
          <div class="reg_xx">
            <div class="reg_sx">
              <img
                src=""
                alt=""
              />
              <span class="reg_xinxi">信息</span>
            </div>
            <div>
              <img src="../image/矩形 11 拷贝 11.png" alt="" />
            </div>
            <div class="reg_jianjie">
              <span>公司简介</span>

              <div class="btn_bianji">
                <el-button type="primary" @click="dialogFormVisible = true"
                  >编辑</el-button
                >
              </div>
              <el-dialog title="信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="信息名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="信息内容" :label-width="formLabelWidth">
                    <el-input class="reg_xxmc" v-model="form.pass" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <div class="btn_qrbc">
                    <el-button
                      type="primary"
                      @click="dialogFormVisible = false"
                    >
                      确认保存
                    </el-button>
                  </div>
                </div>
              </el-dialog>
            </div>
            <div><img src="../image/矩形 11 拷贝 11.png" alt="" /></div>
            <div class="reg_jbxx">
              <span>举报信息</span>
              <div class="btn_bianji">
                <el-button type="primary" @click="dialogFormVisible = true"
                  >编辑</el-button
                >
              </div>
            </div>
            <div class="reg_bqxx">
              <span>版权信息</span>
              <div class="btn_bianji">
                <el-button type="primary" @click="dialogFormVisible = true"
                  >编辑</el-button
                >
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="平台基础规则" name="third"> </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        pass:"",
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      activeName: "first",
      
    };
  },
};
</script>
<style >
  .el-tabs el-tabs--top, .regzhiz {
    background-color: #fff;
    width: 100%;
}
  .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    background-color: #fff;
}
.el-upload--picture-card {
  background-color: #cccccc;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 188px;
  height: 250px;
  line-height: 146px;
  vertical-align: top;
  position: absolute;
  top: 0;
  left: 180px;
}
html{
  height: 100%;
}
.el-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 0;
    height: 100%;
}
.regzhiz {
  width: 100%;
  height: 100%;
  /* background-color: yellow; */
  position: relative;
}
.el-tabs el-tabs--top{
  width: 100%;

}
.reg_bqxx > span {
  font-weight: 700;
  margin-left: 20px;
  margin-top: 20px;
  position: relative;
}

.reg_bqxx {
  height: 220px;
  /* background-color:red; */
}

.reg_jbxx > span {
  font-weight: 700;
}

.reg_jbxx {
  position: relative;
  height: 150px;
  /* background-color: red; */
  margin-left: 20px;
  margin-top: 20px;
}

.btn_qrbc {
  position: absolute;
  right: 400px;
  bottom: 20px;
}

.btn_bianji {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.reg_jianjie {
  margin-left: 20px;
  margin-top: 20px;
  /* background-color: red; */
  height: 200px;
  position: relative;
}

.reg_jianjie > span {
  font-weight: 700;
}

div.reg_sx {
  height: 50px;
  margin-left: 20px;
}

.reg_xinxi {
  font-weight: 700;
  line-height: 50px;
  font-size: 19px;
}

.reg_xx {
  width: 100%;
  height: 750px;
  background-color: #fff;
}

#regardsapp {
  position: relative;
  width: 100%;
  height: 800px;
  /* background-color: red; */
}

.nav_reg {
  width: 100%;
  height: 10%;
  /* background-color: pink; */
  position: absolute;
  top: 20px;
}
</style>